<template>
  <div class="classify">
    <div class="topbar">
      <div class="text">商品分类</div>
      <van-search v-model="value" shape="round" background="#ffffff" placeholder="请输入搜索关键词" />
    </div>
    <div class="list">
      <div class="listleft">
        <van-sidebar v-model="activeKey">
          <van-sidebar-item title="热门推荐" @click="hos()" />
          <van-sidebar-item v-for="(items,index) in NoList" :key="index" :title=items @click="change(items,index)" />
        </van-sidebar>
      </div>
      <div class="listright">
          <!-- lie 分类 -->
          <div class="bbbx">
            <div class="lie">
                <van-tabs @click="fun()"  v-model="active">
                  <van-tab v-for="(item,index) in texts" :key="index" :title=item.brand></van-tab>
                </van-tabs>
 
              <div v-if="(this.Datalist.length!==0)" class="lunbox">
                  <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                    <van-swipe-item v-for="(item,index) in lunList" :key="index"><img :src="item" alt=""></van-swipe-item>
                  </van-swipe>
              </div>

            </div>
          </div>
        <div v-show="this.hort.length!==0" class="succeed">
          <div class="boxn" v-for="(item,index) in hort" :key="index" @click="$router.push({ path: '/Search', query: { id: item.category }})">
                <img :src="item.img1" alt="">
                <p>{{ item.category }}</p>
          </div>
        </div>
        <div v-show="this.hort.length == 0" class="fail">
          <h2>{{num}}</h2>
        </div>



      </div>
    </div>
  </div>
</template>

<script>
import { noList, LeiData, ListData } from '@/api/index.js'
import { Toast } from 'vant';
export default {
    data() {
      return {
        NoList:[],//分类列表下的内容
        activeKey: 0,
        value: '',
        hort: [],//推荐
        texts: [],//分类
        Datalist:[],
        num: "",
        active: 0,//vant
        lei: '',
        lunList:[],
      };
    },
    mounted() {
      // this.$store.state.hostLists  推荐产品
      this.hort = this.$store.state.hostLists;
      // console.log(this.hort)
      //产品分类列表
      noList().then((ok) => {
        this.NoList = ok.data.data;
        // console.log(ok.data.data)
      })

    },
  methods: {
    hos() {
      this.hort = this.$store.state.hostLists;
      },
      change(x, y) {
        // LeiData  产品分类下品牌列表
        this.lei = x;
        // console.log(this.lei);
        LeiData(x).then((ok) => {
          // console.log(ok.data.data)
          if (ok.data.data.length !== 0) {
            // 
            this.texts = ok.data.data
            var brand = this.texts[0]
            // console.log(brand)
            ListData(1, 10, x, brand.brand).then((ok) => {
              // console.log(ok.data.data)
              if (ok.data.data.length !== 0) {
                this.Datalist = ok.data.data
                this.hort = ok.data.data;
                console.log(this.Datalist)
                this.lunList = (this.Datalist[0].banners[0]).split(",")
                // console.log(this.lunList)
              }
            })
          } else {
            Toast("该数据为空")
          }
        });
      }, 
    fun() {
      // console.log(this.lei)
      // console.log(this.active)//点击下标
      ListData(1, 10, this.lei, this.texts[this.active].brand).then((ok) => {
        this.Datalist = ok.data.data
        this.lunList = (this.Datalist[0].banners[0]).split(",")
        console.log(this.Datalist);
        this.hort = ok.data.data;

      })
    }
  }
}
</script>

<style lang="scss" scoped>
.classify{
  width: 3.75rem;
  background-color: #ffffff;
  .topbar{
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 0.69rem;
    box-sizing: border-box;
    .text{
      font-size: 0.18rem;
      color: #333333;
      margin: 0.17rem 0.22rem 0.33rem 0.09rem;
    }
    .van-search{
      width: 2.72rem ;
      height: 0.32rem;
      margin-top: 0.11rem;
    }
  }
  .list {
    display: flex;
    .listleft{
      overflow: scroll;
      .van-sidebar{
        .van-sidebar-item--select::before {
            background-color: #ffcc00;
            
          }
      }
    }
    .listright{
      flex: 1;
      .succeed{
        display: flex;
        justify-content:flex-start;
        align-items: center;
        width: 100%;
        flex-wrap: wrap;
        text-align: center;
        .boxn{
          width:33%;
          display: flex;
          flex-direction: column;
          justify-content:flex-start;
          align-items:flex-start;
          font-size: 0.12rem;
          img{
            margin-left: 0.12rem;
            width: 0.63rem;
            height: 0.63rem;
          }
          p{
            width: 100%;
            text-align: center;
          }
        }
      }
      .bbbx{
        width: 100%;
        .lie {
          // width: 0.48rem;
          display: flex;
          // flex-wrap: nowrap;
          // overflow: auto;
          flex-direction: column;
          justify-content: start;
          align-items: center;
          .texts {
            font-size: 0.12rem;
            margin: 0.03rem 0.12rem;
          }
        }
        .lunbox{
          width: 2.35rem;
          height: 0.945rem;
          border-radius: 0.12rem;
          .my-swipe .van-swipe-item{
            img{
              width: 100%;
              height: 0.945rem;
              border-radius: 0.12rem;
            }
          }
        }
      }
      
      .fail{
        h2{
          background-color: white;
          border-radius: 0.08rem;
          text-align: center;
          font-size: 0.14rem;
        }
      }
    }
  }
}
</style>